<template>
    <div class="cinema-search-filter-component">
        <nut-menu active-color="#5232B7">
            <nut-menu-item v-model="searchFilter.regionValue" :title="currentRegionTitle" :options="searchFilter.region" />
            <nut-menu-item v-model="searchFilter.brandValue" :title="currentBrandTitle" :options="searchFilter.brand" />
        </nut-menu>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { storeToRefs } from 'pinia'
import * as cityApi from "../../api/city";
import * as cinemaApi from '../../api/cinema'
import { useLocationStore } from "../../store";
import { useMovieStore } from "../../store";
const locationStore = useLocationStore()
const movieStore = useMovieStore()
const { getSelectCityinfo } = storeToRefs(locationStore);
const { cinemaLineList } = storeToRefs(movieStore)
console.log(getSelectCityinfo.value, "getSelectCityinfo");


let searchFilter = ref({
    region: [
        { text: "全部", title: "全城", value: 0 }
    ],
    brand: [
        { text: "全部", title: "品牌", value: 0 }
    ],
    regionValue: 0,
    brandValue: 0,
});
onMounted(() => {
    getRegionData();
    getLineData()
});

//组件自定义事件
const emit = defineEmits(['onRegionChanged', 'onBrandChanged'])
watch(() => searchFilter.value.regionValue, (newVal) => {
    emit('onRegionChanged', newVal)
})
watch(() => searchFilter.value.brandValue, (newVal) => {

    emit('onBrandChanged', newVal)
})
watch(() => locationStore.selectCityinfo, (newVal) => {
    getRegionData()
})
const currentRegionTitle = computed(() => {
    const arr = searchFilter.value.region;
    const value = searchFilter.value.regionValue;
    return arr.find((item) => {
        return item.value === value;
    })?.title;
});
const currentBrandTitle = computed(() => {
    const arr = searchFilter.value.brand;
    const value = searchFilter.value.brandValue;
    return arr.find((item) => {
        return item.value === value;
    })?.title;
});
//获取区县数据
const getRegionData = async () => {
    initData()
    const cityId = getSelectCityinfo.value.id
    const res: any = await cityApi.region({ cityId });
    const arr = searchFilter.value.region
    res.data.forEach(item => {
        arr.push({ text: item.districtName, title: item.districtName, value: item.id })
    });
    searchFilter.value.region = arr

}
//获取院线列表
const getLineData = async () => {
    initData()
    const res: any = await cinemaApi.getCinemaLineList();
    movieStore.savedList(res.data)
    const arr = searchFilter.value.brand
    res.data.forEach(item => {
        arr.push({ text: item.cinemaLineName, title: item.cinemaLineName, value: item.id })
    });
    searchFilter.value.brand = arr
}
const initData = () => {
    searchFilter.value = {
        region: [
            { text: "全部", title: "全城", value: 0 }
        ],
        brand: [
            { text: "全部", title: "院线", value: 0 }
        ],
        regionValue: 0,
        brandValue: 0,
    }
}
</script>
<style lang="scss">
.cinema-search-filter-component {
    display: flex;
    flex-direction: column;
    background: #fff;






    .nut-menu .nut-menu__bar {
        box-shadow: none !important;
        font-size: 24px;



        .nut-menu__title-text {
            font-size: 24px;
        }

        .nut-menu__title-icon {
            .nut-icon-rect-down {
                display: block !important;
                font-size: 20px !important;

            }

        }
    }
}
</style>
